$(() => {

  let $width = $('#width'), 
      $height = $('#height'),
      $btnCal = $('#calc'),
      $form   = $('#main'), 
      $perimeter = $('#perimeter'),
      $widthValidate = $('#width-validate'),
      $heightValidate = $('#height-validate'),
      $area = $('#area');

  //字符级校验
  $width.keypress((e)=>{
    let key = e.key,
        val = e.target.value,
        pos = e.target.selectionStart;   

  /*
    val = val.slice(0,pos) + key + val.slice(pos,val.length);
    if(!/^(0|[1-9]\d*)(\.\d+)?((e|E)(\+|-)?\d+)?$/.test(val)){
      e.preventDefault();
    }
  */

    if(!isLegalKey(key,val,pos)){
      e.preventDefault();               
    } 
                                       
  });
  
  $height.keypress((e)=>{

    let key = e.key,
        val = e.target.value,
        pos = e.target.selectionStart;
    /*
    val = val.slice(0,pos) + key + val.slice(pos,val.length);
    if(!/^(0|[1-9]\d*)(\.\d+)?((e|E)(\+|-)?\d+)?$/.test(val)){
      e.preventDefault();
    }
    */

    if(!isLegalKey(key,val,pos)){
      e.preventDefault();           
    } 
  });
  

  //字段级校验
  //多个字段,利用事件冒泡机制 在容器上定义事件
  //$form.focusout((e)=>{
    //console.log(e.target);
  //});
  //字段少
  
  $width.focusout(()=>{
    if(!validate($width,$widthValidate)){
      $width.select();          
    }
  });
  
  $height.focusout(()=>{
    if(!validate($height,$heightValidate)){
      $height.select();             
    }     
  });

  
  $btnCal.click(() => {

    let w = Number($width.val());
    let h = Number($height.val());
    
    //validate校验
    if(validate($width,$widthValidate) && validate($height,$heightValidate)){
      let p = roundFractional((w+h)*2,2),
          a = roundFractional(w*h,2);

      $perimeter.val(p);
      $area.val(a);
    }

  });  
});

//浮点数舍入
function roundFractional(x,n){
  return Math.round(x*Math.pow(10,n))/Math.pow(10,n);
}

function validate(input,output){

  //is empty 是否为空
  if(input.val() === ''){
    output.html('该字段不能为空');
    return false;
  }else{
    output.html('');
  }
  
  //is number 是否为数字
  let val = Number(input.val()); 
  if(isNaN(val)){
    output.html('该字段应该是数值');
    return false;            
  } else{
    output.html('');
  }
  
  //is +  是否大于0
  if(val <= 0){
    output.html('该数值不能小于等于0');
    return false;            
  }else{
    output.html('');    
  }

  return true;
}

function isLegalKey(key,content,pos){
  //过滤非法字符
  if(/[abcdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/.test(key)){
    return false;    
  }

  //合法字符：e 和 E 科学计数法指数符号
  if(key === 'e' || key === 'E'){
    if(pos === 0) return false;
    if(content.indexOf('e') !== -1 || content.indexOf('E') !== -1) return false;
    if(pos > 0 && /[-.]/.test(content.slice(pos-1,pos))) return false;
    if(content.slice(pos,content.length).indexOf('.') !== -1) return false;        }

  // 合法字符：. 小数点
  if(key === '.'){
    if(pos === 0) return false;
    if(content.indexOf('.') !== -1) return false;
    if(pos > 0 && /[eE]/.test(content.slice(0,pos))) return false;
  }
  
  // 合法字符：- 负号
  if(key === '-'){
    if(pos ===0) return false;
    if(pos > 0 && /[0-9.]/.test(content.slice(pos-1,pos))) return false;
    if(pos > 0 && content.indexOf('-') !== -1) return false;                 
  }
  
  return true;
}
